<!DOCTYPE html>
<html>
<head>
   <title>CSS Animations - animation-iteration-count default</title>
   <link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
   <link rel="help" href="http://dev.w3.org/csswg/css3-animations/#the-animation-iteration-count-property-">
   <meta name="flags" content="dom">
   <meta name="assert" content="animation-iteration-count does not inherit by
   default">
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
   <style type="text/css">
      @keyframes grow {
         from {
            width: 50px;
         }
         to {
            width: 100px;
         }
      }
      @keyframes move {
         from {
            margin-left: 0px;
         }
         to {
            margin-left: 50px;
         }
      }
      div {
         width: 50px;
         height: 100px;
         background: gray;
         animation-duration: 0.7s;
      }
      div > div {
         height: 50px;
         background: blue;
      }
      .test {
         animation-name: grow;
         animation-iteration-count: 2;
      }
      .test > div {
         animation-name: move;
      }
   </style>
   <script type="text/javascript">
      setup({explicit_done:true});
      onload = function() {
         var testName = document.querySelector('title').firstChild.data;
         var divs = document.querySelectorAll('div');
         var log = document.querySelectorAll('p')[1].firstChild;
         var passed = false;
         function aboutEqual(observed, actual) {
            var maxDeviation = 0.1;
            return (Math.abs(observed - actual) < maxDeviation);
         }
         var timeout = setTimeout(function() {
            test(function(){assert_true(false);}, testName); done();
            log.data = 'FAIL';
         }, 2000);
         divs[0].addEventListener('animationend', function(evt) {
            clearTimeout(timeout);
            passed = (passed && aboutEqual(evt.elapsedTime, 1.4));
            test(function(){assert_true(passed);}, testName); done();
            log.data = (passed ? 'PASS if the animation occurred.' : 'FAIL');
         });
         divs[1].addEventListener('animationend', function(evt) {
            evt.stopPropagation();
            passed = aboutEqual(evt.elapsedTime, 0.7);
         });
         divs[0].className = 'test';
      }
   </script>
   <style>iframe{display:none}</style>
</head>
<body>
   <p>The gray block below should grow in width once with the blue square
   sticking to the top right corner, then once with the blue square
   stationary in the top left corner, returning to the original size after each
   time.</p>
   <p>Testing...</p>
   <div>
      <div></div>
   </div>
</body>
</html>
